<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
html{
    font-size: 32vw;
}
body{
    font-size: 0.13rem;
    font-family: "微软雅黑"
}
html,body{
    height: 100%;
}
#header{
    position: fixed;
    top: 0;
    height:0.42rem;
    width: 100%;
    background-color: rgb(29,109,255);
   /* overflow: hidden; */
    position: relative;
    padding: 0.04rem;
    
    display: flex;
    justify-content: space-between;

}
#header .logo{
    padding: 0.06rem 0;
    width: 75%;
    margin-left: 0.04rem;
}
#header .logo>a>img{
    height: 0.21rem;
    vertical-align: middle;
}
/* a:hover{
    color: #ccc;
}  */
#header .app img{
    height: 0.28rem;
    padding: 0.04rem;
    vertical-align: middle;

}
#search{
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 100%;
    position: relative;
    
}
#search .searchbox{
    padding: 0.08rem;
    
}
#search .searchbox input{
    height: 0.25rem;
    width: 90%;
    padding-left: 5%;
    border-radius: 0.13rem;
    background-color: #f1f1f1;
    border: none;
    font-size: 0.13rem;

}
input{
    outline: none;
}
#search .button > button {
    width: 0.53rem;
    height: 0.25rem;
    background: #1d6dff;
    border-radius: 0.13rem;
    position: absolute;
    right: 0.08rem;
    top: 0.08rem;
    border: none;
}
#search .button > button::before {
    content: '搜索';
    height: 0.25rem;
    line-height: 0.25rem;
    font-size: 0.13rem;
    border: none;
    color: #fff;
}
/* 顶部 */

/* 主体 */
#subNav{
    background-image: linear-gradient(to bottom, #fff, #ccc);
    display: flex;
    justify-content: space-between;
    margin: 0 1px;
    height: 0.33rem;
    font: 0.11rem/0.33rem "微软雅黑";
    color: #666;
    padding: 0 0.08rem;
}
#subNav .left a{
    text-decoration: none;
    color: #666;
}
#subNav .button{
    width: 0.5rem;
    height: 0.25rem;
    line-height: 00.25rem;
    text-align: center;
    color: #000;
    border-radius: 0.04rem;
    border: 1px solid #ccc;
    margin-top: 0.04rem;
}
/* 比价列表 */
#bijia_info{
    width: 100%;
    font-size: 0.13rem;
    font-family: "微软雅黑";

}
#bijia_info .info{
    margin-bottom: 0.08rem;
}
#bijia_info .info li a{
    display: flex;
    color: #666;
    text-decoration: none;
}
#bijia_info .info li a .img {
    margin-top: 0.08rem;
  margin-right: 5px;
  width: 0.83rem;
  height: 0.83rem;
  padding-left: 0.08rem;
}
#bijia_info .info li img{
   width: 100%;
   height: 100%;
}
#bijia_info .info li a .infoR {
  flex: 1;
}
#bijia_info .info li a .infoR .title h4 {
  font-weight: normal;
  word-break: break-all;
  margin: 0.08rem 0;
}
#bijia_info .info li a .infoR .price {
    font-size: 0.15rem;
    color: #ed0000;
}
#bijia_info .info li a .infoR .other {
  font-size: 0.11rem;
  display: flex;
  align-items: center;
}
#bijia_info .info li a .infoR .other .take_price {
  margin-right: 0.08rem;
  margin: 0.08rem 0.08rem 0.08rem 0;
}
/* 分页 */
#changePage{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.17rem; 
    padding-bottom: 0.08rem;   
}
#changePage .prev,
#changePage .next{
    outline: none;
    text-align: center;
    display: inline-block;
    border-radius: 0.04rem;
    width: 0.67rem;
    height: 0.33rem;
    line-height: 0.33rem;
    background-image: linear-gradient(to bottom, #fff, #f4f4f4);
    border: 1px solid #cccccc;
}
#changePage .page {
    outline: none;
    text-align: center;
    height: 0.33rem;
    width: 0.75rem;
    border: 1px solid #cccccc;
    border-radius: 2px;
}


/* 底部 */
#footer {
    background-color: #f4f4f4;
    /* height: 100px; */
}
#footer > .more {
    height: 0.42rem;
    background-color: #f4f4f4;
    padding: 0.08rem;
}
#footer > .more > a {
    display: block;
    font-size: 0.11rem;
    line-height: 0.25rem;
    text-align: center;
    border-radius: 0.04rem;
    border: 1px solid #dddddd;
    background-image: linear-gradient(#ffffff, #f4f4f4);
    text-decoration: none;

}
#footer .chart {
    background-color: #1d6dff;
    margin-top: 0.08rem;
    margin-bottom: 0.05rem;
}
#footer .chart span {
    color: #fff;
    display: inline-block;
    font: bolder 0.15rem/0.29rem "Microsoft soft";
    padding-left: 0.08rem;
}
#footer .chart .mright img{
    width: 0.17rem;
    height: 0.17rem;
}
#footer .chart .mright{
    line-height: 0.33rem;
    padding-right: 0.17rem;
    float: right;
}
.login .container {
    padding: 0 ;
    margin: 0 auto;
}
#footer .row {
    height: 0.3rem;
    margin-top: 0.08rem;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    display: flex;
    justify-content: space-between;
    
    
}
#footer .row a {
    width: 33%;
    text-decoration: none;
}
#footer .row a div{
    height: 0.28rem;
    line-height: 0.28rem;
    text-align: center;
    font-size: 0.12rem;
    border-right: 1px solid #c4c4c4;
}

.content_b {
    text-align: center;
    padding: 0.08rem;
}
.content_b p {
    margin: 0 0 0.08rem;
    font-size: 0.11rem;
}
    </style>
  
</head>
<body>
    <!-- 顶部 -->
    <header id="header">
        <div class="logo">
            <a href="../index.html">
                <img src="	http://chst.vip:8081/for-stu/wfzh/images/header_logo.png" alt="">
            </a>
        </div>
        <div class="app">
            <a href="">
                <img src="http://chst.vip:8081/for-stu/wfzh/images/header_app.png" alt="">
            </a>
        </div>
    </header>

    <!-- 搜索栏 -->
    <main id="search">
        <div class="searchbox">
            <input type="text" name placeholder="请输入你想比价的产品">
        </div>
        <div class="button">
            <button></button>
        </div>
    </main>
    
    <!-- 频道 -->
    <nav id="subNav">
        <div class="left">
            <a href="../index.html"><span>首页></span></a>
            <a href="./category.html"><span>全部分类></span></a>
            <span>电视></span>
        </div>
        <div class="button">
            筛选
        </div>
    </nav>
   <!-- 比价列表 -->
   <section id="bijia_info">
        <ul class="info">
            <!-- <li>
                <a href="#">
                    <div class="img">
                        <img src="" alt="">
                    </div>
                    <div class="infoR">
                        <div class="title">
                            <h4>联想联想联想联想联想联想联想联想联想联想</h4>
                        </div>
                        <div class="price">222</div>
                        <div class="other">
                            <div class="take_price">报价6</div>
                            <i class="iconfont"></i>
                            <span>评论</span>
                        </div>
                    </div>
                </a>
            </li> -->           
        </ul>
   </section>

   <!-- 分页 -->
   <section id="changePage">
        <button class="prev" disabled>上一页</button>
        <select name="" id="" class="page">
            <!-- <option value="">1/3</option>
            <option value="">2/3</option>
            <option value="">3/3</option> -->
        </select>
        <button class="next">下一页</button>
   </section>
    

    <!-- 底部 -->
    <main id="footer">
        <div class="more">
            <a href="">更多优惠信息</a>
        </div>

        <div class="chart">
            <span>品牌排行</span>
            <span class="mright">
                <img src="http://chst.vip:8081/for-stu/wfzh/images/more.png" alt="">
            </span>
        </div>

        <div class="login">
            <div class="container">
                <div class="row">
                    <a href="">
                        <div>登入</div>
                    </a>
                    <a href="">
                        <div>注册</div>
                    </a>
                    <a href="javascript:scrollTo(0,0)">
                        <div>返回顶部</div>
                    </a>
                </div>
            </div>
            <div class="content_b">
                <p>
                    <a href="#">手机APP下载</a>
                    <a href="#">万峰智慧商城手机版</a>
                    " -- 掌上比价平台"
                </p>
                <p> chst.vip:8181/crm </p>
            </div>
        </div>
    </main>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script >

        
        // 封装处理传入参数的方法
        function getQueryString(url){
            // 通过 ? 分割 成 数组 数组下表为 1 的 就是所有的参数
            let urlStr = url.split('?')[1]

            // 判断如果没有参数 返回 null
            if (!urlStr) {
                return null
            }

            // 将获取到的参数 转码
            urlStr = decodeURI(urlStr)

            // 针对 所有的参数 通过 & 分割成 数组
            urlArr = urlStr.split('&')

            let urlObj = {}
            // 遍历 所有的参数数组 通过 = 分割成 数组 以键值对的形式存到对象中
            urlArr.forEach(item => {
                let urlArr2 = item.split('=')
                urlObj[urlArr2[0]] = urlArr2[1]
            });
            return urlObj
        }


        (function(){
            //1.获取浏览器的url
            let url = location.href;
            console.log(url);
            //2.解析参数
            //3.需要将query参数转换为{key:value}的形式  
            let urlObj = getQueryString(url)           
            // fetch 请求
            fetch('http://chst.vip:1234/api/getcategorybyid?categoryid=' + urlObj.categoryid)
            .then(function(response){
                    return response.json();
            }).then(function(res){
                console.log(res);
                let data = res.result[0]
                console.log(data);
                console.log(data.category);
                $('#subNav span').eq(2).html(data.category + '&nbsp;')

            })

            // 定义分类页
            let pageid = 1;

            // 获取总页数
            fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${urlObj.categoryid}&pageid=${pageid}`)
            .then(response => {
                return response.json()
            }).then(data => {
                console.log(data);
                console.log(data.totalCount);
                let pages = Math.ceil(data.totalCount / data.pagesize)
                console.log(pages);
                // 渲染 select 列表
                let options = '';
                for(let i = 0;i<pages;i++){
                    options += `
                        <option >${i+1}/${pages}</option>
                    `
                }
                $('.page').html(options);

                // 下一页 添加点击事件
                $('.next').on('click',function(e){
                    pageid++;
                    //  阻止 button 默认刷新页面
                    e.preventDefault();


                    $('.prev').prop('disabled',false)
                    $('.page option').eq(pageid - 1).prop('selected',true).siblings().prop('selected',false)
                    console.log(pageid);

                    // 调用 渲染页面 函数
                    getProduct(pageid);
                    // 判断 最后一页 按钮不可选
                    if (pageid>=pages) {
                        return $('.next').prop('disabled',true);
                    }
                    
                });
                
                // 上一页 添加点击事件
                $('.prev').on('click',function(e){
                    pageid--;
                    //  阻止 button 默认刷新页面
                    e.preventDefault();


                    $('.next').prop('disabled',false)
                    $('.page option').eq(pageid - 1).prop('selected',true).siblings().prop('selected',false)
                    console.log(pageid);

                    // 调用 渲染页面 函数
                    getProduct(pageid);
                    // 判断 禁用 按钮
                    if (pageid == 1) {
                        return $('.prev').prop('disabled',true);
                    }
                });

                // select 下拉框 添加 change 事件
                $('.page').on('change',function(){
                    // 若option没有设置value的值 那么servlet里面获得的是option标签中间的内容。
                    pageid = this.value.split('/')[0].trim()
                    console.log(pageid);
                    // 调用 渲染页面 函数
                    getProduct(pageid);
                    // 判断
                    if (pageid>=pages) {
                        $('.prev').prop('disabled',false);
                        return $('.next').prop('disabled',true);
                    }
                    if (pageid == 1) {
                        $('.next').prop('disabled',false);
                        return $('.prev').prop('disabled',true);
                    }
                })

            });

            // 调用 渲染页面 函数
            getProduct(pageid);

            // 定义 渲染页面 函数
            function getProduct(pageid){
                fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${urlObj.categoryid}&pageid=${pageid}`)
                    .then(function(response){
                        return response.json();
                    }).then(function(res){
                        let data = res.result;
                        console.log(data);

                        let ele = ''
                        data.forEach(item => {
                            ele += `
                            <li>
                                <a href="productlist.html?categoryid=${urlObj.categoryid}&productid=${item.productId}">
                                    <div class="img">
                                        ${item.productImg}
                                    </div>
                                    <div class="infoR">
                                        <div class="title">
                                            <h4>${item.productName}</h4>
                                        </div>
                                        <div class="price">${item.productPrice}</div>
                                        <div class="other">
                                            <div class="take_price">${item.productQuote}</div>
                                            <i class="iconfont"></i>
                                            <span>${item.productCom}</span>
                                        </div>
                                    </div>
                                </a>
                            </li> 
                            `
                        })

                        $('.info').html(ele)
                    })
            };


        })();

    </script>

  
</body>
</html>